<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/bootstrap.min.css') }}>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <style>
        p{
           text-align: center;
        }
        body {
            background: url("{{ url_for('static',filename=arc.arc_url)}}");
        }
        .mymedia{
            background: rgba(255, 255, 255, .7);
            box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
            border-radius: 10px;
            height: 800px;
        }
    </style>
</head>
<body >

    <div class = 'container' >
        <div class="row mymedia" >

            <div class="col-xs-1"></div>
            <div class="col-xs-7 panel panel-primary">
                <div class="panel-heading">
                     <h2 class="panel-title"><p>{{ arc.arc_name }}</p></h2>
                     <footer>作者：<cite title="Source Title">{{ arc.arc_author }}</cite></footer>
                </div>
                
                
                <br/>

                <div class="panel-body">{{ arc.arc_content }}</div>
            </div>
            <div class="col-xs-4" style="background-color:rgb(234, 234, 234); height: 800px;">
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <div class="text-center"><h4>目录</h4></div>
                <br/>
                <div>
                    <dl class="dl-horizontal">
                        <dt>标题：</dt>
                        <dd>{{ arc.arc_name[:5]+'...'  }}</dd>
                        <dt>作者：</dt>
                        <dd>{{ arc.arc_author }}</dd>
                        <dt>内容：</dt>
                        <dd>{{ arc.arc_content[:5]+'...' }}</dd>
                      </dl>
                </div>
            </div>
       </div>
    </div>
</body>
</html>